<template>
  <div id="app">
    <a-row class="header">
      <a-col flex="auto">
        <a-menu :selected-keys="selectedKeys" mode="horizontal" :style="{ lineHeight: '64px' }" @click="doClickMenu">
          <a-menu-item key="/learn">学习</a-menu-item>
          <a-menu-item key="/levels">关卡</a-menu-item>
          <!-- <a-menu-item key="/playground">广场</a-menu-item> -->
        </a-menu>
      </a-col>
    </a-row>
    <div class="content">
      <router-view />
    </div>
  </div>
</template>
<script setup>
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
const router = useRouter();
const selectedKeys = computed(() => [route.path]);
// console.log(selectedKeys)
// 点击菜单事件
const doClickMenu =(key)=>{
  if (key) {
    router.push({
      path: key.key,
    });
  }
}
</script>
<style scoped>
.header{
  border-bottom: 1px solid #f0f0f0;
  padding: 0 24px;
}
.content {
  padding: 24px;
}
</style>
